<template>
  <div class="pdf_wrap">
    <div
      class="pdf_loading"
      v-loading.fullscreen.lock="fullscreenLoading"
      element-loading-text="加载..."
    ></div>
    <div class="pdf_cont">
      <div ref="printCont" class="report_wrap">
        <div class="report_hd">
          <!-- <div class="ewm_box">
            <div ref="qrCodeUrl" id="qrcode"></div>
            <p>扫一扫查看报告</p>
          </div>-->
          <div class="report_title">
            <h3>{{patinfo.hospitalName}}</h3>
            <p>{{patinfo.dep}} 检查报告单</p>
          </div>
          <div class="report_info">
            <div class="ri_row">
              <div class="ri_item">
                <div class="ri_label">影像号：</div>
                <div class="ri_txt">{{patinfo.xno}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="patient_info">
          <div class="ri_row">
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">姓名</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.patSpellName}}</div>
            </div>
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">申请科室</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.deptName}}</div>
            </div>
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">申请医生</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.applyDoctorName}}</div>
            </div>
          </div>
          <div class="ri_row">
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">性别</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.sex}}</div>
            </div>
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">床号</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.bunkId}}</div>
            </div>
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">检查时间</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.checkDate | dateFormatter}}</div>
            </div>
          </div>
          <div class="ri_row">
            <div class="ri_item">
              <div class="ri_label">
                <span class="ri_label_Justify">年龄</span>：
              </div>
              <div class="ri_txt ri_txt_100">{{patinfo.patAge | formatAge}}</div>
            </div>
            <div class="ri_item ri_item_col2">
              <div class="ri_label">
                <span class="ri_label_Justify">检查部位</span>：
              </div>
              <div class="ri_txt ri_txt_100">
                <div class="ri_txt_dot" :title="fullPary">
                  <span class="ri_txt_bg">{{fullPary}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="diagnosis_info">
          <div class="di_info">
            <dl>
              <dt>影像表现：</dt>
              <dd>{{patinfo.findings}}</dd>
            </dl>
          </div>
          <div class="di_info">
            <dl>
              <dt>影像诊断：</dt>
              <dd>{{patinfo.inspectExamResult}}</dd>
            </dl>
          </div>
          <div class="ri_row">
            <div class="ri_item" style="width:43%">
              <div class="ri_label">报告日期：</div>
              <div class="ri_txt">{{patinfo.reportDate | dateFormatter}}</div>
            </div>
            <div class="ri_item" style="width:32%">
              <div class="ri_label">报告医生：</div>
              <div class="ri_txt">{{patinfo.reportDoctorName}}</div>
            </div>
            <div class="ri_item" style="width: 25%">
              <div class="ri_label">审核医生：</div>
              <div class="ri_txt">{{patinfo.confirmDoctorName}}</div>
            </div>
          </div>
        </div>
        <div class="footer_wrap">
          <div class="tips">
            <span>备注：</span>本报告仅供本院临床科室参考
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import QRCode from 'qrcodejs2'
import { dateFormatter } from '@/utils/validate'
export default {
  props: {
    patinfo: {
      type: Object,
      default: null
    },
    qrurl: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      link: 'https://baidu.com'
    }
  },
  // watch: {
  //   qrurl(val) {
  //     this.qrcode()
  //   }
  // },
  computed: {
    fullPary() {
      if (!this.patinfo.categoryName) {
        return ''
      }
      return this.patinfo.categoryName
    }
  },
  created() {
    // this.fetchData()
    // this.$nextTick(function () {
    //   this.qrcode()
    // })
  },
  methods: {
    //  生成二维码
    // qrcode() {
    //   let that = this
    //   this.$refs.qrCodeUrl.innerHTML = ''
    //   if (!that.link) { return }
    //   new QRCode(this.$refs.qrCodeUrl, {
    //     width: 80,
    //     height: 80, // 高度
    //     text: that.link // 二维码内容
    //     // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
    //     // background: '#f0f',   // 背景色
    //     // foreground: '#ff0'    // 前景色
    //   })
    // },
    fetchData() {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
        this.$nextTick(() => {
          this.$print(this.$refs.printCont)
        })
      }, 3000)
    }
  },
  filters: {
    formatSex(value, row, index) {
      switch (value) {
        case 1:
          return '男'
        case 2:
          return '女'
        default:
          return '其它'
      }
    },
    formatAge(value) {
      if (!value) { return '' }
      if (value.indexOf('Y') >= 0) {
        return value.replace(/\Y/g, '岁')
      } else if (value.indexOf('M') >= 0) {
        return value.replace(/\M/g, '月')
      } else if (value.indexOf('D') >= 0) {
        return value.replace(/\D/g, '日')
      } else {
        return value
      }
    },
    dateFormatter
  }
}
</script>

<style lang="scss" scoped>
h3,
p {
  padding: 0;
  margin: 0;
}
.report_wrap {
  margin: 0 auto;
  min-width: 730px;
  max-width: 800px;
  min-height: 820px;
  background-color: #fff;
  // padding: 30px 20px;
  font-family: 黑体, SimHei;
  .report_hd {
    border-bottom: solid 1px #333;
    position: relative;
    .report_title {
      text-align: center;
      padding: 20px 0 40px;
      h3 {
        font-size: 26px;
        // font-weight: 500;
        margin-bottom: 30px;
      }
      p {
        font-size: 22px;
      }
    }
    .ewm_box {
      width: 120px;
      position: absolute;
      right: 20px;
      top: 10px;
      #qrcode {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        img {
          padding: 10px;
        }
      }
      p {
        font-size: 14px;
        color: #333;
        text-align: center;
      }
    }
  }
  .report_info {
    padding: 6px 0;
  }
  .patient_info {
    padding: 10px 0;
    border-bottom: solid 1px #333;
  }
  .diagnosis_info {
    padding: 10px 0;
    border-bottom: solid 1px #333;
    .di_info {
      min-height: 260px;
      padding: 0 16px;
      dl {
        dt {
          font-size: 16px;
          font-weight: bold;
        }
        dd {
          font-size: 16px;
          padding: 10px 0;
          line-height: 1.5em;
        }
      }
    }
  }
  .footer_wrap {
    padding: 10px 16px;
    .tips {
      font-size: 14px;
      span {
        font-weight: bold;
      }
    }
  }
  .ri_row {
    overflow: hidden;
    font-size: 16px;
    padding: 0 16px;
    .ri_item {
      float: left;
      width: 33.33%;
      height: 32px;
      line-height: 32px;
    }
    .ri_label {
      float: left;
      .ri_label_Justify {
        display: inline-block;
        height: 100%;
        width: 68px;
        text-align: justify;
        vertical-align: top;
        &::after {
          display: inline-block;
          width: 100%;
          content: "";
          height: 0;
        }
      }
    }
    .ri_txt_100 {
      padding-left: 86px;
    }
    .ri_txt_bg {
      padding: 4px 0;
      background-color: #f0f8ff;
    }
    .ri_item_col2 {
      width: 66.66%;
      .ri_txt_dot {
        margin-top: 2px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>

<style lang="scss">
#qrcode {
  width: 100px;
  margin: 0 auto;
  img {
    padding: 10px;
  }
}
</style>
